<template>
  <view class="my-page">
    <NavBar title="我的" :showBack="false" />

    <view class="user-info">
      <view class="avatar">
        <Image
          :src="userState.userInfo?.avatarUrl"
          class="avatar-image"
          v-if="globalState.isLogin"
        />
        <Image :src="MyAvatar" class="avatar-image" v-else />
      </view>

      <view class="user-info-name" @tap="handleToMyInfo">
        <text class="user-info-name-text">{{
          globalState.isLogin ? userState.userInfo?.nickName : "去登录"
        }}</text>

        <image class="user-info-name-icon" :src="MyArrow" />
      </view>

      <text class="user-info-name-id" v-if="globalState.isLogin"
        >ID:{{ userState.userInfo?.cmUserId }}</text
      >

      <text class="user-info-name-id" v-else>登录使用完整功能</text>
    </view>

    <view class="list-container">
      <view class="list-item" @tap="handleToMyAppointments">
        <image class="list-item-left-icon" :src="MyYuyue" />

        <view class="list-item-content">
          <text class="list-item-content-text">我的预约</text>
        </view>

        <image class="list-item-right-icon" :src="MyArrow" />
      </view>

      <view class="list-item" @tap="handleToMyUser">
        <image class="list-item-left-icon" :src="MyUser" />

        <view class="list-item-content">
          <text class="list-item-content-text">就诊人管理</text>
        </view>

        <image class="list-item-right-icon" :src="MyArrow" />
      </view>

      <view
        class="list-item"
        @tap="handleToMyLogout"
        v-if="globalState.isLogin"
      >
        <image class="list-item-left-icon" :src="MyLogout" />

        <view class="list-item-content">
          <text class="list-item-content-text">注销</text>
        </view>

        <image class="list-item-right-icon" :src="MyArrow" />
      </view>
    </view>

    <view class="bottom-nav">
      <BottomNav :activeIndex="1" />
    </view>
  </view>
</template>

<script setup lang="ts">
import MyYuyue from "../../assets/images/my_yuyue.png";
import MyAvatar from "../../assets/images/my_avatar.png";
import MyUser from "../../assets/images/my_user.png";
import MyLogout from "../../assets/images/my_logout.png";
import MyArrow from "../../assets/images/my_arrow.png";
import NavBar from "../../components/NavBar.vue";
import BottomNav from "../../components/BottomNav.vue";
import Taro, { useDidShow } from "@tarojs/taro";
import { useReady } from "@tarojs/taro";
import { useUserStore } from "../../stores/userStore";
import { logout } from "../../api/user.api";
import { removeToken, removeClinicId } from "../../utils/auth.util";
import { useGlobalStore } from "../../stores/globalStore";
import { ref } from "vue";

const userState = useUserStore();
const globalState = useGlobalStore();
const loading = ref(false);

// 去修改个人信息
const handleToMyInfo = () => {
  if (!globalState.isLogin) {
    Taro.navigateTo({
      url: "/pages/login/login",
    });

    return;
  }

  Taro.navigateTo({
    url: "/pages/myInfo/myInfo",
  });
};

// 我的预约
const handleToMyAppointments = () => {
  if (!globalState.isLogin) {
    Taro.navigateTo({
      url: "/pages/login/login",
    });

    return;
  }

  Taro.navigateTo({
    url: "/pages/myAppointments/myAppointments",
  });
};

// 就诊人管理
const handleToMyUser = () => {
  if (!globalState.isLogin) {
    Taro.navigateTo({
      url: "/pages/login/login",
    });

    return;
  }

  Taro.navigateTo({
    url: "/pages/patients/patients",
  });
};

const logoutApi = async () => {
  if (loading.value) return;

  try {
    loading.value = true;

    const res = await logout();

    if (res.code === "200") {
      removeToken();
      removeClinicId();

      userState.userInfo = null;
      userState.patientList = [];
      globalState.isLogin = false;

      // 使用 redirectTo 跳转到首页，避免页面栈溢出
      Taro.redirectTo({
        url: "/pages/index/index",
      });
    }
  } catch (error) {
    console.log(error);
  } finally {
    loading.value = false;
  }
};

const handleToMyLogout = async () => {
  Taro.showModal({
    title: "提示",
    content: "确定注销吗？",
    success: async (res) => {
      if (res.confirm) {
        logoutApi();
      }
    },
  });
};

useDidShow(() => {
  if (!userState.userInfo && globalState.isLogin) {
    userState.getCmUserByIdApi();
  }
});

useReady(() => {
  if (!userState.userInfo && globalState.isLogin) {
    userState.getCmUserByIdApi();
  }
});
</script>

<style lang="scss">
.my-page {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  background-color: white;

  .user-info {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    padding-top: 20px;
    padding-left: 16px;
    padding-right: 16px;

    .avatar {
      width: 85px;
      padding-bottom: 16px;

      .avatar-image {
        width: 85px;
        height: 85px;
        border-radius: 50%;
        overflow: hidden;
      }
    }

    .user-info-name {
      display: flex;
      align-items: center;
      // gap: 8px;
      gap: 4px;
      width: max-content;

      .user-info-name-text {
        font-weight: 500;
        font-size: 18px;
        color: #333333;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }

      .user-info-name-icon {
        width: 22px;
        height: 22px;
      }
    }

    .user-info-name-id {
      font-weight: 400;
      font-size: 14px;
      color: #777777;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }

  .list-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 0px 16px;

    .list-item {
      display: flex;
      align-items: center;
      width: 100%;
      height: 61px;
      padding-left: 20px;
      padding-right: 13px;
      background: #f7f8fc;
      border-radius: 4px 4px 4px 4px;

      .list-item-left-icon {
        width: 20px;
        height: 20px;
        background-color: #f0f0f0;
      }

      .list-item-content {
        flex: 1;
        display: flex;
        align-items: center;
        padding-left: 11px;

        .list-item-content-text {
          font-weight: 500;
          font-size: 15px;
          color: rgba(0, 0, 0, 0.9);
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
      }

      .list-item-right-icon {
        width: 22px;
        height: 22px;
      }
    }
  }

  .bottom-nav {
    margin-top: auto;
  }
}
</style>
